import React from "react";
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faAngleLeft } from '@fortawesome/free-solid-svg-icons';
import theme from "../utils/theme";
export default function NavigationBar({
    title, leftView, rightView, titleView, goBack, style
}) {
    return <View style={[styles.container, style]} pointerEvents="box-none">
        <View style={{flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start'}}>
            {
            leftView ? leftView : (goBack ? <TouchableOpacity onPress={goBack} style={styles.left_bar_button}>
                <FontAwesomeIcon 
                    icon={faAngleLeft} 
                    color={theme.colors.text.primary}
                    size={24}
                />
            </TouchableOpacity> : null)
            }
        </View>
        <View style={{alignItems: 'center', justifyContent: 'center'}}>
            {
                titleView ? titleView : null
            }
            {
                title && <Text style={styles.title}>{title}</Text>
            }
        </View>
        <View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center'}}>
            {
                rightView
            }
        </View>
    </View>
}

const styles = StyleSheet.create({
    container: {
        flexDirection: "row",
        paddingLeft: 24,
        paddingRight: 24,
        alignItems: 'center',
        justifyContent: 'center',
        height: 44,
        backgroundColor: theme.colors.secondary.contrast,
    },
    left_bar_button: {
    },
    left_view: {
        flex: 1,
        flexDirection: "row",
        alignItems: 'center',
        justifyContent: 'flex-start'
    },
    title: {
        color: theme.colors.text.primary,
        fontSize: 18,
        lineHeight: 26,
        fontWeight: '500',
        textAlign: 'center'
    },
    title_view: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    right_view: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end'
    }
})